<template>
  <div class="wot-process-node-field-table">
    <c-row-search>
      <c-row margin>
        <c-col>
          <el-input
            v-model="keyword"
            @keyup.enter.native="query"
            clearable
            :placeholder="tplLang('text_asset_a', ['btn_search_a'])"
          >
            <c-icon slot="prefix" name="search" prefix></c-icon>
          </el-input>
        </c-col>
        <c-col>
          <el-button type="primary" @click="query">
            {{ multLang('btn_search_a') }}
          </el-button>
        </c-col>
      </c-row>
      <template #right>
        <FieldSelect :data="data" @submit="submit" is-process> </FieldSelect>
      </template>
    </c-row-search>
    <c-table
      index
      ref="table"
      height="calc(100% - 66px)"
      :data="table.data"
      :col="col"
      :opn="{ width: '300px' }"
      @mod-change="changeMod"
    >
      <template #opn="{ row }">
        <el-button type="text" @click="edit(row)">
          <c-icon name="edit"></c-icon>
          <span>
            {{ multLang('btn_edit_a') }}
          </span>
        </el-button>
        <el-button type="text" @click="del(row)">
          <c-icon name="delete"></c-icon>
          <span>
            {{ multLang('btn_delete_a') }}
          </span>
        </el-button>
        <el-button type="text" @click="move(row, 4)">
          <!-- <c-icon name="delete"></c-icon> -->
          <span>
            {{ multLang('上移') }}
          </span>
        </el-button>
        <el-button type="text" @click="move(row, 5)">
          <!-- <c-icon name="delete"></c-icon> -->
          <span>
            {{ multLang('下移') }}
          </span>
        </el-button>
      </template>
    </c-table>
    <ProcessFieldAev
      ref="ProcessFieldAev"
      :data="table.click"
      @query="query"
    ></ProcessFieldAev>
  </div>
</template>
<script>
import { searchWord } from '@/util/data'
import FieldSelect from './FieldSelect.vue'
import ProcessFieldAev from './ProcessFieldAev.vue'
import {
  addProcessFieldData,
  changeProcessFieldMod,
  delProcessFieldData,
  getProcessFieldData
} from '@/http/api/v1/wot'
export default {
  name: 'ProcessFieldTable',
  components: { FieldSelect, ProcessFieldAev },
  props: {
    data: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      keyword: '',
      filterData: [],
      table: {
        data: [],
        click: {}
      }
    }
  },
  computed: {
    workColumnMap() {
      return this.optionMap('work_column')
    },
    blockList() {
      return this.optionList('block')
    },
    isShowList() {
      return this.optionList('is_show')
    },
    operationPermissionList() {
      return this.optionList('operation_permission')
    },
    col() {
      return [
        {
          label: '控件名称',
          prop: 'field_name',
          formatter: (row, { property }) => this.multLang(row[property])
        },
        {
          label: '控件',
          prop: 'field_view_type',
          formatter: (row, { property }) => this.workColumnMap[row[property]]
        },
        {
          label: '显示区域',
          prop: 'field_section_type',
          tooltip: false,
          mod: {
            type: 'select',
            auth: true,
            options: this.blockList
          }
        },
        {
          label: '是否显示',
          prop: 'field_is_show',
          mod: {
            type: 'switch',
            auth: true,
            options: this.isShowList
          }
        },
        {
          label: '写入/只读',
          prop: 'field_right',
          mod: {
            type: 'switch',
            auth: true,
            options: this.operationPermissionList
          }
        }
      ]
    }
  },
  watch: {
    data() {
      this.query()
    }
  },
  beforeCreate() {},
  created() {
    this.setOption({ key: 'work_column' })
    this.setOption({ key: 'block' })
    this.setOption({ key: 'is_show' })
    this.setOption({ key: 'operation_permission' })
  },
  beforeMount() {},
  mounted() {},
  beforeUpdate() {},
  updated() {},
  activated() {},
  deactivated() {},
  beforeDestroy() {},
  destroyed() {},
  methods: {
    search() {
      this.filterData = searchWord(this.keyword, this.data, 'label')
    },
    query() {
      const { node_id, node_type, pref_id } = this.data
      node_id &&
        node_type &&
        pref_id &&
        getProcessFieldData({
          node_id,
          node_type,
          pref_id,
          keywordSearch: this.keyword
        }).then(({ data }) => {
          this.table.data = data || []
        })
    },
    edit(row) {
      this.table.click = row || {}
      this.$refs.ProcessFieldAev.edit()
    },
    del(row) {
      this.$confirm(
        this.tplLang('text_ah', ['btn_delete_a', 'title_ng']),
        this.multLang('btn_delete_a', 'title_ng'),
        {
          confirmButtonText: this.multLang('btn_sure_a'),
          cancelButtonText: this.multLang('btn_cancel_a'),
          type: 'warning',
          iconClass: 'c-icon icon-info-circle color-danger'
        }
      ).then(() => {
        const { id } = row || {}
        id &&
          delProcessFieldData({ id }).then(({ code }) => {
            if (code === 200) this.query()
          })
      })
    },
    submit(field_form_codes) {
      const { node_id, node_type, pref_id } = this.data
      node_id &&
        node_type &&
        pref_id &&
        addProcessFieldData({
          node_id,
          node_type,
          pref_id,
          field_form_codes
        }).then(({ code }) => {
          if (code === 200) {
            this.query()
          }
        })
    },
    changeMod({ col, result, row }) {
      // field_section_type
      // field_is_show
      // field_right
      const { property } = col
      const { id } = row
      switch (property) {
        case 'field_section_type':
          this.changeSectionType(id, result)
          break
        case 'field_is_show':
          this.changeIsShow(id, result)
          break
        case 'field_right':
          this.changeRight(id, result)
          break

        default:
          break
      }
      // console.log(...args)
    },
    changeSectionType(id, field_section_type) {
      changeProcessFieldMod({
        id,
        field_section_type,
        type: 1
      }).then(({ code }) => {
        code === 200 && this.query()
      })
    },
    changeIsShow(id, { val: field_is_show, valBack }) {
      changeProcessFieldMod({
        id,
        field_is_show,
        type: 2
      })
        .then(({ code }) => {
          if (code === 200) {
            this.query()
          } else {
            valBack()
          }
        })
        .catch(() => {
          valBack()
        })
    },
    changeRight(id, { val: field_right, valBack }) {
      changeProcessFieldMod({ id, field_right, type: 3 })
        .then(({ code }) => {
          if (code === 200) {
            this.query()
          } else {
            valBack()
          }
        })
        .catch(() => {
          valBack()
        })
    },
    move(row, type) {
      const { id } = row || {}
      changeProcessFieldMod({ id, type }).then(({ code }) => {
        if (code === 200) this.query()
      })
    }
  }
}
</script>
<style lang="scss">
.wot-process-node-field-table {
  height: calc(100% - 218px);
  margin-top: 10px;
}
</style>
